import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  TextInput,
  Switch,
} from 'react-native';
import {Picker} from '@react-native-picker/picker';
const Setting = ({navigation}) => {
  const [account, setAccount] = useState('1');
  const [notice, setNotice] = useState('1');
  return (
    <View style={styles.container}>
      <View style={styles.title}>
        <Text style={styles.titleText}>系統設定</Text>
      </View>
      <View style={styles.settingList}>
        <View style={styles.settingListItem}>
          <View style={styles.settingListItemLeft}>
            <Text style={styles.settingListItemText}>語系設定</Text>
          </View>
          <View style={styles.settingListItemRight}>
            <Picker
              selectedValue={account}
              style={styles.operationOneLeftPicker}
              onValueChange={(itemValue, itemIndex) => setAccount(itemValue)}>
              <Picker.Item label="繁體中文" value="1" />
              <Picker.Item label="簡體中文" value="2" />
              <Picker.Item label="英文" value="3" />
            </Picker>
          </View>
        </View>
        <View style={styles.settingListItem}>
          <View style={styles.settingListItemLeft}>
            <Text style={styles.settingListItemText}>推播通知</Text>
          </View>
          <View style={styles.settingListItemRight}>
            <Picker
              selectedValue={notice}
              style={styles.operationOneLeftPicker}
              onValueChange={(itemValue, itemIndex) => setNotice(itemValue)}>
              <Picker.Item label="開啟" value="1" />
              <Picker.Item label="关闭" value="2" />
            </Picker>
          </View>
        </View>
      </View>
      <View style={styles.buttons}>
        <View style={styles.Setting}>
          <Button
            title="確認送出"
            color="#FF9800"
            onPress={() => navigation.navigate('HomeScreen')}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {},
  title: {
    height: 75,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    color: '#17141a',
    fontWeight: 'bold',
    fontSize: 20,
  },
  settingList: {
    marginTop: 20,
  },
  settingListItem: {
    color: '#17141a',
    fontWeight: 'bold',
    fontSize: 20,
    height: 58,
    paddingLeft: 10,
    paddingRight: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    borderBottomColor: '#CCCCCC',
    borderBottomWidth: 1,
  },
  settingListItemText: {
    color: '#17141a',
    fontWeight: 'bold',
    fontSize: 16,
  },
  settingListItemRight: {
    paddingRight: 20,
  },
  operationOneLeftPicker: {
    width: 230,
    backgroundColor: 'white',
    borderColor: '#767676',
    borderWidth: 1,
  },
  buttons: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    marginTop: 80,
  },
  Setting: {
    width: 100,
  },
});

export default Setting;
